<script setup lang="ts">
  import SchemaSearchPage from '@/components/schema-search-page/index.vue'
  import type { DoSearch, SearchFieldTypes } from '@/components/schema-search-page/interface'
  import { CategoryStatusEnum, CategoryTypeEnum } from '@/shared'
  import type { CategoryEntity } from '@/shared/entity/category'
  import { CategoryStatusOptions, CategoryTypeOptions } from '@/shared/options'
  import { getUri } from '@/utils'
  import { DoDelete, DoGet, DoPost } from '@/utils/http'
  import { ref, useTemplateRef } from 'vue'
  import Create from './create.vue'

  const tableRef = useTemplateRef('tableRef')

  const Refresh = () => {
    tableRef.value?.Refresh()
  }

  const searchFields: SearchFieldTypes = [
    {
      type: 'Input',
      fieldName: 'name',
      fieldLabel: '分类名称',
      props: {
        style: 'width: 208px'
      }
    },
    {
      type: 'Select',
      fieldName: 'type',
      fieldLabel: '分类类型',
      props: {
        options: CategoryTypeOptions,
        style: 'width: 208px'
      }
    }
  ]

  const columns = [
    {
      title: '分类名称',
      dataIndex: 'name'
    },
    {
      title: '分类类型',
      dataIndex: 'type'
    },
    {
      title: '排序字段',
      dataIndex: 'sort'
    },
    {
      title: '分类状态',
      dataIndex: 'status'
    },
    {
      title: '操作时间',
      dataIndex: 'updateTime'
    },
    {
      title: '操作',
      dataIndex: 'action'
    }
  ]

  const doSearch: DoSearch = async (page: number, size: number, conditions?: any) => {
    const resp = await DoGet<CategoryEntity[]>(
      getUri('/category/page', {
        page,
        size,
        ...conditions
      })
    )

    return {
      data: resp.data,
      total: resp.total || 0
    }
  }
  const visible = ref(false)

  const initialValues = ref<Partial<CategoryEntity>>({})

  const type = ref<CategoryTypeEnum>(CategoryTypeEnum.Dish)

  const handlerDelete = async (record: CategoryEntity) => {
    await DoDelete(
      getUri(`/category`, {
        id: record.id
      })
    )
    Refresh()
  }

  const handlerChangeStatus = async (status: CategoryStatusEnum, id: number) => {
    await DoPost(
      getUri(`/category/status/${status}`, {
        id
      })
    )
    Refresh()
  }
</script>

<template>
  <SchemaSearchPage
    :search-fields="searchFields"
    :columns="columns"
    :do-search="doSearch"
    ref="tableRef"
  >
    <template #type="{ record }">
      {{ CategoryTypeOptions.find(item => item.value === record.type)?.label }}
    </template>
    <template #status="{ record }">
      <a-badge
        :status="record.status === CategoryStatusEnum.Enable ? 'success' : 'danger'"
        :text="CategoryStatusOptions.find(item => item.value === record.status)?.label"
      ></a-badge>
    </template>
    <template #action="{ record }">
      <a-space>
        <a-link
          @click="
            () => {
              visible = true
              initialValues = record
              type = record.type as CategoryTypeEnum
            }
          "
        >
          修改
        </a-link>
        <a-popconfirm content="确认删除吗？" @ok="() => handlerDelete(record)">
          <a-link status="danger">删除</a-link>
        </a-popconfirm>
        <a-popconfirm
          content="确认操作吗？"
          @ok="
            handlerChangeStatus(
              record.status === CategoryStatusEnum.Enable
                ? CategoryStatusEnum.Disable
                : CategoryStatusEnum.Enable,
              record.id
            )
          "
        >
          <a-link :status="record.status === CategoryStatusEnum.Disable ? 'success' : 'danger'">
            {{ record.status === CategoryStatusEnum.Disable ? '启用' : '禁用' }}
          </a-link>
        </a-popconfirm>
      </a-space>
    </template>
    <template #default>
      <a-space>
        <a-button
          type="primary"
          @click="
            () => {
              visible = true
              type = CategoryTypeEnum.Dish
              initialValues = {}
            }
          "
        >
          新增菜品分类
        </a-button>
        <a-button
          type="primary"
          @click="
            () => {
              visible = true
              type = CategoryTypeEnum.Setmeal
              initialValues = {}
            }
          "
        >
          新增套餐分类
        </a-button>
      </a-space>
    </template>
  </SchemaSearchPage>
  <Create v-model="visible" :initial-values="initialValues" :type="type" @refresh="Refresh" />
</template>
